<template>
    <div class='users'>
        <p class="top_p"><el-button type="text" @click="goHome" class="sy">首页</el-button>&emsp;/&emsp;商品管理&emsp;/&emsp;商品列表</p>
      <!-- 头部搜索 -->
        <div class="seatch">
             <div class="dvinp">
                <el-input
                placeholder="请输入内容"
                 v-model="seatchval"
                clearable>
               </el-input>
                <i class="myfont  el-icon-search" @click="seatch"></i>
            </div>
            <el-button type="primary" > <router-link to="/goods/add">添加用户</router-link> </el-button>
        </div>
        <!-- 表格部分 -->
        <el-table
     :data="userdata"
     style="width: 100%"
     max-height="490">
     <el-table-column
      fixed
      type="index"
      :index="filterIndex"
      label="#"
      width="50">
     </el-table-column>
     <el-table-column
      prop="goods_name"
      label="商品名称"
      width="600">
     </el-table-column>
     <el-table-column
      prop="goods_price"
      label="商品价格（元）"
      width="100">
     </el-table-column>
     <el-table-column
      prop="goods_number"
      label="商品重量"
      width="100">
      </el-table-column>
     <el-table-column
      prop=""
      label="创建时间"
      width="200">
      <template slot-scope="scope">
        {{setTim(scope.row.add_time)}}
      </template>
     </el-table-column>
   
    <el-table-column
      fixed="right"
      label="操作"
      width="120">
     <template slot-scope="scope">
       <el-button type="primary" class="el-icon-edit" size="mini"></el-button>
        <el-button type="danger" class="el-icon-delete" size="mini" @click="del(scope)"></el-button>
      </template>
    </el-table-column>
  </el-table>
  <!-- 分页部分 -->
    <el-pagination
      :current-page="pagenum"
      :page-sizes="[2,5,8,10]"
      :page-size="pagesize"
      @prev-click="jack"
      @next-click="add"
      @size-change="setsize"
      @current-change="setnum"
      layout="total, sizes, prev, pager, next, jumper"
      :total="numall">
    </el-pagination>
</div>
</template>

<script>
import { getgoodslist, goods_del } from "../api/getData.js";

export default {
  data() {
    return {
      pagenum: 1, //当前页码
      pagesize: 2, //每页显示的条数
      userdata: [], //保存数据
      numall: 0, //总数据条数
      seatchval: "", //搜索框
      showadd: false //添加框的显示
    };
  },
  mounted() {
    this.getlist();
  },
  methods: {
    goHome() {
      this.$router.push("/greet");
    },
    //获取数据的函数
    getlist() {
      getgoodslist(
        `query=${this.seatchval}&pagenum=${this.pagenum}&pagesize=${
          this.pagesize
        }`
      ).then(res => {
        console.log(res);
        if (res.meta.status == 200) {
          if (res.data.goods.length != 0) {
            this.userdata = res.data.goods;
            this.numall = res.data.total;
            this.$message({
              message: "数据获取成功",
              type: "success"
            });
          } else {
            this.pagenum--;
            this.getlist();
          }
        } else {
          this.$message.error(res.meta.msg);
        }
      });
    },
    //使用到的index
    filterIndex(index) {
      return index + 1;
    },
    //下一页
    add(e) {
      this.pagenum = e;
      this.getlist();
    },
    //上一页
    jack(e) {
      this.pagenum = e;
      this.getlist();
    },
    //每页显示条数发生改变时候触发的函数
    setsize(e) {
      this.pagesize = e;
      this.getlist();
    },
    //当前页码发生改变时候触发的函数
    setnum(e) {
      this.pagenum = e;
      this.getlist();
    },
    //搜索事件
    seatch() {
      this.getlist();
    },

    //删除
    del(e) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          goods_del(e.row.goods_id).then(res => {
            if (res.meta.status == 200) {
              this.$message({
                type: "success",
                message: "删除成功!"
              });
            } else {
              this.$message({
                type: "info",
                message: "服务器被外星人抢走了"
              });
            }
            this.getlist();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    setTim(time) {
      let oldDate = new Date(time * 1000);
      let n = oldDate.getFullYear(); //年
      let y = oldDate.getMonth() + 1; //月
      let r = oldDate.getDate(); //日
      let s = oldDate.getHours(); //时
      let f = oldDate.getMinutes(); //分
      let m = oldDate.getSeconds(); //秒
      return `${n}-${y}-${r} ${s}:${f}:${m}`;
    }
  },
  components: {}
};
</script>

<style lang='scss'>
.users {
  background: #fff;
  position: relative;
}
.seatch {
  display: flex;
  align-items: center;
}
.dvinp {
  margin: 10px;
  border-radius: 3px;
  display: flex;
}
.dvinp .myfont {
  display: inline-block;
  width: 50px;
  height: 40px;
  outline: none;
  line-height: 40px;
  border: #ccc;
  border-left: 1px solid #ccc;
  background: #eee;
  text-align: center;
}
.seatch .el-button {
  height: 40px;
}
.cell .el-button {
  padding: 5px !important;
}
.allContext {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 999;
}
.contexts {
  width: 550px;
  background: #fff;
  margin: 100px auto;
  padding: 15px 15px 50px 15px;
}
.addtexttop {
  font-size: 19px;
  flex: 1;
}
.textTop {
  display: flex;
  margin-bottom: 20px;
}
.cinp {
  width: 100%;
}
.cinp p {
  width: 100%;
  height: 40px;
  display: flex;
  margin: 10px 0;
  line-height: 40px;
}
.cinp p span {
  width: 15%;
  text-align: right;
}
.cinp p input {
  width: 100%;
  margin: 0 10px;
  border-radius: 3px;
  padding-left: 10px;
  border: 1px solid #aaa;
}
</style>
